<template>
  <div class="div_box">
    <div class="header">
      <div>
        <el-select v-model="search_val.alarmType" placeholder="告警类型" size="small" clearable
          style="width: 190px; margin-left: 15px" @change="AlarmList">
          <el-option v-for="(item, i) in alarmTypeList" :key="i" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="search_val.status" placeholder="处理状态" size="small" clearable
          style="width: 190px; margin-left: 15px" @change="AlarmList">
          <el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" height="320" class="table" ref="refTable" row-key="id"
        :header-cell-style="headerStyle">
        <el-table-column align="center" label="序号" type="index" width="80" height="30">
        </el-table-column>
        <el-table-column align="center" prop="subDeviceCode" label="探测器编码" min-width="120" show-overflow-tooltip>
        </el-table-column>
          <el-table-column align="center" prop="name" label="安装点" min-width="180" show-overflow-tooltip>
          </el-table-column>
        <el-table-column align="center" prop="alarmType" label="告警类型" min-width="120" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-tag v-if="row.alarmType == 30" type="warning">火警告警</el-tag>
            <el-tag v-if="row.alarmType == 31" type="warning">火情告警</el-tag>
            <el-tag v-else-if="row.alarmType == 41" type="warning">报警</el-tag>
            <el-tag v-else-if="row.alarmType == 42" type="warning">离线</el-tag>
            <el-tag v-else type="warning">其它告警</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="处理状态" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="danger">未处理</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning">处理中</el-tag>
            <el-tag v-else-if="scope.row.status == 3" type="success">已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="告警时间" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="handlingTime" label="处理时间" min-width="120" show-overflow-tooltip>
        </el-table-column>

        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" content="处理" placement="bottom" v-if="row.status != 3">
              <i @click="onHandle(row)" class="iconfont tixianchuli tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="AlarmList" class="pagination" />
    </div>

    <alarmHandling ref="refalarmHandling" :alarmid="alarmid"></alarmHandling>
  </div>
</template>

<script>
import { reqAlarmList } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import alarmHandling from "@/components/DeviceInfo/components/alarmHandling.vue";

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => { },
    },
    isDetector: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Pagination,
    alarmHandling,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      search_val: {
        status: "",
        alarmType: "",
      },
      timeArr: [],
      page: 1,
      limit: 10,
      total: 0,
      statusList: [
        {
          id: "1",
          name: "未处理",
        },
        {
          id: "2",
          name: "处理中",
        },
        {
          id: "3",
          name: "已处理",
        },
      ],
      alarmTypeList: [
        {
          id: "30",
          name: "火警告警",
        },
        {
          id: "31",
          name: "火情告警",
        },
        {
          id: "41",
          name: "报警",
        },
        {
          id: "42",
          name: "离线",
        },
      ],
      alarmid: "",
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    onHandle(row) {
      this.alarmid = row.id;
      this.$refs.refalarmHandling.dialogVisible = true;
    },
    // 获取告警列表
    async AlarmList() {
      // console.log("告警列表this.deviceInfo", this.deviceInfo);
      let res = await reqAlarmList(this.page, this.limit, {
        userId: this.user.userId,
        tenantId: this.user.tenantId,
        roleName: this.user.roleName,
        imei: this.deviceInfo.imei || this.deviceInfo.parentDeviceCode,
        subDeviceCode: this.isDetector ? this.deviceInfo.deviceCode : "",
        status: this.search_val.status,
        alarmType: this.search_val.alarmType,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
    // 点击关闭弹框
    closeDialog() {
      this.tableData = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

.div_box {
  // height: calc(100vh - 212px);
  // height: calc(100vh - 27vh);
  // max-height: 500px;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;

    // display: flex;
    // justify-content: center;
    .label {
      margin: 10px 0px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}

.content {
  height: 100%;
}

.el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

.tableBtnIcon {
  cursor: pointer;
}
</style>